import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { NavBar, Space, Toast } from "antd-mobile";
import request from "../../api/request";
import { IndexBar, List } from "antd-mobile";
import { Card, Button, Tag } from "antd-mobile";
import { useDispatch } from "react-redux";
import { setCity } from "../../store/citys";
import { useNavigate, useParams } from "react-router-dom";
function Index() {
  let nav=useNavigate()
  let {type}=useParams()
  let { start, end } = useSelector((state) => state.citys);
  let [list, setList] = useState([]);
  let [hotList, setHotList] = useState([]);
  let dispatch=useDispatch()
  let getData = async () => {
    let res = await request.get("/api/city");
    setList(res.data.data.city);
    setHotList(res.data.data.hotCities);
  };
  useEffect(() => {
    getData();
  }, []);
  const dian=(city)=>{
    dispatch(setCity({type,city}))
    nav('/')
  }
  return (
    <div>
      <NavBar>
        <div>
          城市列表
          <span>{start}</span>
          <span>→</span>
          <span>{end}</span>
        </div>
      </NavBar>
      <div>
        <Card title="当前城市">
          <span>{hotList.length > 0 && hotList[0].name}</span>
        </Card>
      </div>
      <div>
        <Card title="热门城市">
          {hotList.length > 0 &&
            hotList.map((item, index) => <Tag key={index}>{item.name}</Tag>)}
        </Card>
      </div>
      <div>
        <Card title="城市列表">
          <IndexBar>
            {list.length > 0 &&
              list.map((item) => {
                return (
                  <IndexBar.Panel
                    index={item.initial}
                    title={`${item.initial}`}
                    key={`${item.initial}`}
                  >
                    <List>
                      {item.list.map((item, index) => (
                        <List.Item key={index} onClick={()=>dian(item.name)}>{item.name}</List.Item>
                      ))}
                    </List>
                  </IndexBar.Panel>
                );
              })}
          </IndexBar>
        </Card>
      </div>
    </div>
  );
}

export default Index;
